<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>step 1</title>
</head>

<body>
    <div id="wp"></div>
    <script>
        // method 1
        // function render(data) {
        //     let str = "";
        //     data.forEach(v => {
        //         str += `<p>${v.title}</p><p>${v.content}</p>`
        //     });
        //     return str;
        // }

        // method 2
        function template(v) {
            return `<p>${v.title}</p><p>${v.content}</p>`;
        }
        function render(data) {
            let str = "";
            data.forEach(v => {
                str += template(v)
            });
            return str;
        }

        const allData = [{
            title: 'this is my first data',
            content: 'hello world 1'
        },
        {
            title: 'this is my second data',
            content: 'hello world 2'
        },
        {
            title: 'this is my third data',
            content: 'hello world 3'
        }]

        let tpl = render(allData);
        document.getElementById('wp').innerHTML = tpl;
    </script>
</body>

</html>